<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <script>
    /*
    上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取
     this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法，请参考官方文档。
    */
    debugger;
var NotesList = React.createClass({
  displayName: "NotesList",

  render: function render() {
    return React.createElement(
      "ol",
      null,
      React.Children.map(this.props.children, function (child) {
        return React.createElement(
          "li",
          null,
          child
        );
      })
    );
  }
});

ReactDOM.render(React.createElement(
  NotesList,
  null,
  React.createElement(
    "span",
    null,
    "hello"
  ),
  React.createElement(
    "span",
    null,
    "world"
  )
), document.body);
    </script>
  </body>
</html>

